<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我要投诉</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">


    <link rel="stylesheet" href="./public/css/ansicht.css">
    <!-- 阿里图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_461630_jcxm7ciaxtl9dx6r.css">
    <link rel="stylesheet" href="./public/css/self.css">


</head>
<body>

<div class="page-group">
    <div class="page page-icons" id="page-from">
        <!--
                <header class="bar bar-nav">
                    <a class="button button-link button-nav pull-left back" href="complain.html">
                        <span class="iconfont icon-fanhui icon-left"></span>
                        返回
                    </a>
                    <h1 class="title">我要投诉</h1>
                </header>
        -->
                <!-- ----------------------- -->
        <div class="page-content self-list-block">
            <form method="post" action="" id="formData" enctype="multipart/form-data">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <!-- 隐式传递的值 -->
                            <input type="hidden" name="ordertype" value="1"><!-- 订单类型 -->
                            <input type="hidden" name="userid" value="9527"><!-- 用户ID -->
                            <input type="hidden" name="orderform" value="2"><!-- 来源0=书记1=县长2=投诉 -->
                            <input type="hidden" name="idcard" value="513"><!-- 身份证 -->
                            <input type="hidden" name="isshow" value="1"><!-- 是否自愿公开 -->


                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">标题</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="title" placeholder="请输入标题" onkeyup="getVal(this)"
                                               onblur="verifyInput(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <!--
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">事发时间</div>
                                    <div class="item-input ">
                                        <input type="date" name="begintime" placeholder="请选择时间" value="2017-12-30">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">区域</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="area" placeholder="请输入区域" onkeyup="getVal(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"  onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="address" placeholder="请输入详细地址" onkeyup="getVal(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                         -->
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">投诉内容</div>
                                    <div class="item-input self-item-input">
                                        <textarea name="content" placeholder="请输入投诉内容"
                                                  onkeyup="getVal(this)"></textarea>
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">添加图片</div>
                                    <div class="item-input">
                                        <div class="container">
                                            <!--    照片添加    -->
                                            <div class="z_photo">
                                                <div class="z_file">
                                                    <input type="file" name="file" id="file" value="" accept="image/*"
                                                           multiple onchange="imgChange('z_photo','z_file');"/>
                                                </div>
                                            </div>
                                            <!--遮罩层-->
                                            <div class="z_mask">
                                                <!--弹出框-->
                                                <div class="z_alert">
                                                    <p>确定要删除这张图片吗？</p>
                                                    <p>
                                                        <span class="z_cancel">取消</span>
                                                        <span class="z_sure">确定</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">添加音频</div>
                                    <div class="item-input" style="position: relative; margin-bottom:0">
                                        <span id="upaudio" class="iconfont icon-notification"
                                              style="height:3rem;font-size: 2.5rem; color:#f2f2f2; position: absolute;top:-.3rem;left:.3rem"></span>
                                        <input id="audioInput" style="display: inline-block; height: 3rem;  opacity: 0;"
                                               type="file" name="file"/>
                                        <audio id="audio" controls autoplay
                                               style="display: none; margin-top:.3rem"></audio>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">添加视频</div>
                                    <div class="item-input" style="position: relative; margin-bottom:0">
                                        <span id="upvedio" class="iconfont icon-video"
                                              style="height:3rem;font-size: 2.5rem; color:#f2f2f2; position: absolute;top:-.3rem;left:.3rem"></span>
                                        <input id="vedioInput" style="display: inline-block; height: 3rem;  opacity: 0"
                                               type="file" name="file"/>
                                        <video id="vedio" style="width: 100%; margin-top: .45rem; display: none"
                                               controls autobuffer></video>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <a href="javascript:;" class="button button-big button-fill button-danger" onclick="verify();"
                       id="submit" interAPI="api/wxapi/workorder/addorders" type="0">提交</a>
                </div>
            </form>

        </div>
        <!-- ----------------------- -->
    </div>
</div>

<script src="./public/js/jquery-3.2.1.min.js"></script>
<script src="./public/js/ansicht.js"></script>
<script src="./public/js/self.js"></script>

<script>
    //录音上传
    $(function () {
        $("#audioInput").change(function () {
            console.log(this.files[0].name)
            var objUrl = getObjectURL(this.files[0]);
            $("#audio").attr("src", objUrl);
            $("#audio")[0].pause();
            $("#upaudio").hide();
            $("#audioInput").hide();
            $("#audio").show();
            $("#mp3_submit").show()
            getTime();
        });
        $("#vedioInput").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            $("#vedio").attr("src", objUrl);
            $("#vedio")[0].pause();
            $("#upvedio").hide();
            $("#vedioInput").hide();
            $("#vedio").show();
            $("#mp3_submit").show()
            getTime();
        });
    });

    <!--获取mp3文件的时间 兼容浏览器-->
    function getTime() {
        setTimeout(function () {
            var duration = $("#audio")[0].duration;
            if (isNaN(duration)) {
                getTime();
            }
            else {
                console.info("该歌曲的总时间为：" + $("#audio")[0].duration + "秒")
            }
        }, 10);
    }

    <!--把文件转换成可读URL-->
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>


<script type="text/javascript">

    /*
    * 图片上传
    */

    //限制上传张数
    $('.z_file').click(function () {
        if ($('.z_addImg').length > 2) {
            return false;
        }
    })

    //px转换为rem
    /*
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    */
    function imgChange(obj1, obj2) {

        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
        }
        ;
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function () {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function () {
                    mask.style.display = "none";
                };
                sure.onclick = function () {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        }
        ;
    };


</script>
</body>
</html>